<template>
  <div style="width: 100%; height: 100%; background-color: #c7c7c7">
    <div style="background-color: #ffffff"  class="form-container">
      <h2 class="form-title">添加美容护理服务</h2>

      <el-upload
          ref="upload"
          class="upload-demo"
          action="#"
          :http-request="uploadFile"
          :limit="2"
          list-type="picture"
      >
        <el-button type="primary">点击长传图片</el-button>
        <template #tip>
          <div class="el-upload__tip">
            请上传两张 jpg/png 格式的图片
          </div>
        </template>
      </el-upload>

      <el-input v-model="projectUpdate.name" placeholder="服务名称"></el-input>
      <el-input v-model="projectUpdate.category" placeholder="服务类别"></el-input>
      <el-input v-model="projectUpdate.price" placeholder="项目价格"></el-input>
      <el-input v-model="projectUpdate.description" placeholder="描述"></el-input>
      <el-input v-model="projectUpdate.descriptionDetail" type="textarea" placeholder="详细描述"></el-input>

      <el-button type="info"><router-link to="/projectList">返回</router-link></el-button>
      <el-button type="primary" @click="handleUpdateAvatar">确定</el-button>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "ProjectAdd",
  data(){
    return{
      projectList:[],
      projectUpdate:{
        category:'',
        name:'',
        price:'',
        description:'',
        descriptionDetail:'',
        fileList:[],
      },
    }
  },
  methods:{
    uploadFile(params){
      this.projectUpdate.fileList.push(params.file)
    },
    handleUpdateAvatar() {
      this.$refs['upload'].submit();
      var forms = new FormData();
      // 我这里需要将更新时间和uid同时传给后端，后端使用对象接收，所以没有设置content-type
      // 如果你只传file，要设置axios中headers的content-type为：multipart/form-data
      forms.append("fileHead", this.projectUpdate.fileList[0]);
      forms.append("fileDetail", this.projectUpdate.fileList[1]);
      forms.append("name", this.projectUpdate.name);
      forms.append("category", this.projectUpdate.category);
      forms.append("price", this.projectUpdate.price);
      forms.append("description", this.projectUpdate.description);
      forms.append("descriptionDetail", this.projectUpdate.descriptionDetail);
      axios.post("http://localhost:8088/project/add",forms,{withCredentials:true})
          .then(res => {
            console.log(res)
          }).catch(err => {
        console.log("上传文件时发生错误: " + err);
      })
      this.visible = false;
      this.$refs['upload'].clearFiles();
    },
    cancel() {
      this.visible = false;
      this.$refs['upload'].clearFiles();
    },
  }
}
</script>

<style scoped>
.upload-demo {
  margin-bottom: 20px;
}

.el-input {
  margin-bottom: 20px;
}

.el-button {
  margin-right: 10px;
}

.form-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.form-title {
  font-size: 24px;
  margin-bottom: 20px;
}

</style>